<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div class="table">
      <el-table 
        :data="tableData" 
        row-key="id"
        stripe 
        border
        style="flex: 3;"
      >
        <el-table-column type="selection" width="48" fixed></el-table-column>
        <el-table-column
          v-for="(item) in tableHeader"
            :key="item.id"
            :prop="item.prop"
            :label="item.label"
        >
        </el-table-column>
      </el-table>
      <div id="list" class="list">
        <div 
          class="border"
          v-for="(item,index) in list"
            :key="index"
        >
         {{ item.label }}
        </div>
      </div>
    </div>
    <el-button type="primary" @click="refresh" style="margin-top: 10px;">刷新</el-button>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      list: [
        {
          label: "性别",
          prop: "sex",
        },
        {
          label: "年龄",
          prop: "age",
        },
        {
          label: "民族",
          prop: "nation",
        }
      ],
      tableHeader: [
        {
          label: "序号",
          prop: "id",
        },
        {
          label: "姓名",
          prop: "name",
        },
        {
          label: "日期",
          prop: "date",
        },
        {
          label: "地址",
          prop: "address",
        },
      ],
      tableData: [
        {
          id: "1",
          date: '16-05-03',
          name: 'Tom1',
          address: 'No. 189',
          sex: 'male',
          age: '20',
          nation: 'asia'
        },
        {
          id: "2",
          date: '16-05-02',
          name: 'Tom2',
          address: 'No. 189',
          sex: 'woman',
          age: '40',
          nation: 'europe'
        },
        {
          id: "3",
          date: '16-05-04',
          name: 'Tom3',
          address: 'No. 189',
          sex: 'male',
          age: '26',
          nation: 'america'
        },
        {
          id: "4",
          date: '16-05-01',
          name: 'Tom4',
          address: 'No. 189',
          sex: 'male',
          age: '20',
          nation: 'asia'
        },
      ]
    }
  },
  mounted() {
    this.tabDrop();
    this.listDrop();
  },
  methods: {
    //列表拖拽
    listDrop() {
      const list = document.getElementById("list");
      let that = this;
      new Sortable(list, {
        animation: 150,
        group: {
            name: 'shared',
            pull: true,
            put: true
        },
        onAdd: evt => {
          let temLable = evt.clone.textContent;
          let temProp;
          for(let i = 0; i <that.tableHeader.length; i++) {
            if(that.tableHeader[i].label === temLable){
              temProp = that.tableHeader[i].prop;
            }
          }
          let temp ={label:temLable,prop:temProp};

          if(that.list.length > 1) {
            let toElement = evt.to;
            let fromElement = evt.from;
            let childElement = evt.to.childNodes[evt.newIndex+1];
            //删去拉来的样式,后面要统一插入
            toElement.removeChild(childElement);
            //因为from被拉走了，插回去，才能执行删除操作
            fromElement.insertBefore(childElement,fromElement.childNodes[evt.oldIndex]);
            // fromElement.appendChild(childElement);
          }else if(that.list.length <= 1) {
            let fromElement = evt.from;
            let childElement = (evt.to.childNodes[evt.newIndex+2]) ;
            fromElement.insertBefore(childElement,fromElement.childNodes[evt.oldIndex]);
          }
          if(that.tableHeader.length > 1) {
            that.list.splice(evt.newIndex, 0, temp);
          }
        },
        onRemove: evt => {
          that.list.splice(evt.oldIndex, 1)
        }
      });
    },

    tabDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      let that = this;
      Sortable.create(tbody, {
        animation: 150,
      })
      Sortable.create(wrapperTr, {
        animation: 150,
        group: {
            name: 'shared',
            pull: true,
            put: true
        },
        onUpdate: evt => {
          let temLable;
          let temProp;
          let tempHeader = [];
          for(let i = 1; i <evt.to.childNodes.length; i++) {
            temLable = evt.to.childNodes[i].textContent;
            for(let i = 0; i <that.tableHeader.length; i++) {
              if(that.tableHeader[i].label === temLable){
                temProp = that.tableHeader[i].prop;
              }
            }
            tempHeader.push({label:temLable,prop:temProp})
          }
          let toElement = evt.to;
          let fromElement = evt.from;
          let childElement = evt.to.childNodes[evt.newIndex];
          //删去拉来的样式
          toElement.removeChild(childElement);
          //因为from被拉走了，插回去
          fromElement.insertBefore(childElement,fromElement.childNodes[evt.oldIndex]);

          that.tableHeader = tempHeader;
        },
        onAdd: evt => {
          let temLable = evt.clone.textContent;
          let temProp
          for(let i = 0; i <that.list.length; i++) {
            if(that.list[i].label === temLable){
              temProp = that.list[i].prop
            }
          }
          let temp ={label:temLable,prop:temProp}

          let toElement = evt.to;
          let fromElement = evt.from;
          let childElement = toElement.childNodes[evt.newIndex];
          //删去拉来的元素，不然后面新增的时候会多一个字段
          toElement.removeChild(childElement);
          //因为来源处的元素被拉走了，插回去，不然后面删除的时候会多删一个
          fromElement.insertBefore(childElement,fromElement.childNodes[evt.oldIndex]);

          that.tableHeader.splice(evt.newIndex-1, 0, temp)
        },
        onRemove: evt => {
          if(that.tableHeader.length > 1) {
            that.tableHeader.splice(evt.oldIndex-1, 1)
          }
        }
      })
    },
    refresh() {
      location.reload(); 
    },
  }
}
</script>

<style lang="scss" scoped>
.hello {
  width: 100%;
  h1 {
    font-size: 24px;
    color: rgba(12, 229, 77, 0.741);
  }
  .table {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .list {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .border {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    height:40px;
    border: solid 1px #999;
    margin: 2px;
  }
}
</style>
